<template>
    <div class="app-container">
        <!-- 业务对象选项卡 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for=" userSetting in userSettings"
                    :label="userSetting.name" :name="userSetting.id" >
<!--             按个人添加页面   -->
                <div v-if="activeName === '0'">
                    <el-alert :title="roleName === undefined ? '权限共：'+ total +'人' : roleName +'权限共：' + total +'人'"
                            type="info"
                            :closable="false"
                            show-icon>
                    </el-alert>
                    <el-form ref="form" :model="accountForm"  >
                        <el-row>
                            <el-col :span="20">
                                <el-form-item prop="userCode">
                                    <el-select v-model="accountForm.userCode" filterable clearable placeholder="支持姓名（中文、拼音全拼和首字母）、工号搜索" size="small" style="width: 100%">
                                        <el-option v-for="account in selectedDataList"
                                                :key="account.userCode"
                                                :label="account.userName+'-'+account.userCode"
                                                :value="account.userCode"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="3" style="margin-left: 5px;">
                                <el-form-item >
                                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="addAccount">添加</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <!-- 列表数据 -->
                    <el-table v-loading="accountListLoading" :data="accountData" :show-header="false" max-height="480px" >
                        <el-table-column  prop="userName" :show-overflow-tooltip="true" />
                        <el-table-column  prop="userCode" :show-overflow-tooltip="true" />
                        <el-table-column align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteAccount(scope.row.userCode)" >移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
<!--             按组织机构添加角色页面   -->
                <div v-if="activeName === '1'">
                    按组织机构添加角色页面
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import { searchByRole, saveOne, deleteOne } from '@/api/platform/account'
    export default {
        name: "userAuth",
        props: {
            // 所有账号
            accountList: Array,
            // 角色编号
            roleCode: String,
            // 角色名称
            roleName: String,
        },
        data() {
            return {
                activeName: '0',
                userSettings: [
                    {name: '按人员添加', id: '0'},
                    {name: '按组织机构添加', id: '1'},
                ],
                // 未拥有该权限的账户
                selectedDataList: [],
                // 拥有该权限账号
                accountData: [],
                accountListLoading: false,
                // 拥有该权限用户数量
                total: 0,
                // 账号表单
                accountForm: {
                    userCode: undefined,
                    roleCode: undefined,
                }


            }
        },
        created() {
            // 初始化角色所属用户
            this.listRoleUsers();
        },
        methods: {
            // 查询当前角色所属的所有用户
            listRoleUsers() {
                this.accountListLoading = true
                const searchParams = { 'searchParams': { 'roleCode': this.roleCode }}
                console.log(searchParams)
                searchByRole(searchParams).then(res => {
                    // console.log(res)
                    this.accountData = res.responseBody;
                    this.selectedDataList = this.accountList.filter((account) => !this.accountData.some((item) => account.id === item.id))
                    this.total = this.accountData.length;
                    this.accountListLoading = false
                }).catch(err => {
                    // console.log(err)
                    this.accountListLoading = false
                })
            },

            // 添加账号
            addAccount() {
                if (this.accountForm.userCode !== undefined) {
                    this.accountForm.roleCode = this.roleCode;
                    saveOne(this.accountForm).then(res => {
                        if (res.retCode === '200') {
                            this.$message.success('添加成功!');
                            this.listRoleUsers()
                            this.resetForm();
                        } else {
                            this.$message.error('添加失败！  错误号：' + res.retCode)
                            console.log(res)
                        }
                    });
                } else {
                    this.$message.error('添加失败，请选择账号重新尝试！');
                }
            },

            // 移除账号
            deleteAccount(userCode) {
                const data = {
                    userCode: userCode,
                    roleCode: this.roleCode
                }
                this.$confirm('确定要移除吗?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return deleteOne(data);
                }).then(res => {
                    if (res.retCode === '200') {
                        this.$message.success('移除成功!');
                        this.listRoleUsers()
                        this.resetForm();
                    } else {
                        this.$message.error('删除失败' + res.retCode)
                    }
                })
            },

            // 重置账号表单
            resetForm() {
                this.accountForm.userCode = undefined;
            },

            // 选中业务对象触发事件
            handleClick(tab, event) {
                // console.log(tab, event);
                console.log("== Id ===",this.activeName);
            },
        }
    }
</script>
